<template>
  <div class="app-container">
    <el-card>

      <el-table
        v-loading="listLoading"
        :data="dataList"
        style="width: 100%;margin-top:10px;"
        max-height="600px"
        border
        highlight-current-row
        :header-cell-style="{background:'#f5f7fa'}"
      >
        <el-table-column align="center" prop="club" label="申请加入的社团" />
        <el-table-column align="center" prop="username" label="申请人学号" />
        <el-table-column align="center" prop="realname" label="申请人姓名" />
        <el-table-column align="center" prop="faculty_title" label="申请人学院" />
        <el-table-column label="申请理由" align="center" width="150">
          <template slot-scope="{row}">
            <el-tooltip class="item" effect="dark" :content="row.reason" placement="top-start">
              <span v-if="row.reason.length > 8">{{ row.reason.substring(0,8) }}...</span>
              <span v-else> {{ row.reason }} </span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center" label="申请文件">
          <template slot-scope="{row}">
            <span v-for="(item, i) in row.files" :key="i" class="link-type" style="text-decoration:underline" @click="previewFile(item)">
              {{ item.name }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="80px" align="center">
          <template slot-scope="{row}">
            <el-button
              type="success"
              size="mini"
              plain
              icon="el-icon-check"
              @click="showViewDialog(row)"
            > 审核 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    </el-card>

    <el-dialog
      :title="dialogText"
      :visible.sync="dialogViewFormVisible"
      width="50%"
    >
      <el-descriptions
        title="申请人信息"
        direction="vertical"
        :column="2"
        border
      >
        <el-descriptions-item label="申请加入的社团">{{ form.club }}</el-descriptions-item>
        <el-descriptions-item label="申请人姓名">{{ form.realname }}</el-descriptions-item>
        <el-descriptions-item label="申请人学号">{{ form.username }}</el-descriptions-item>
        <el-descriptions-item label="申请人学院">{{ form.faculty_title }}</el-descriptions-item>
        <el-descriptions-item label="申请日期">{{ form.created_time }}</el-descriptions-item>
      </el-descriptions>

      <el-form ref="form" :model="form" status-icon label-position="top" :rules="rules">
        <el-form-item label="审核状态" prop="check_status">
          <el-select v-model="form.check_status" placeholder="请选择">
            <el-option label="通过" value="通过" />
            <el-option label="不通过" value="不通过" />
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onSubmit()">提交审核</el-button>
        <el-button @click.native="dialogViewFormVisible = false">
          取消
        </el-button>
      </div>
    </el-dialog>

    <el-image-viewer
      v-if="previewImg"
      :on-close="closePreviewImage"
      :url-list="imgList"
      :z-index="9999"
    />

  </div>
</template>

<script src="./index.js"></script>

<style lang="scss">
.el-dialog__body .action {
  position: absolute;
  right: 5px;
  top: 0;
  line-height: inherit;
}
.hideImageUpload .el-upload--picture-card {
  display: none;
}
.hideImageUpload .el-upload--text {
  display: none;
}
</style>
